/**
 * 非分支类型，需禁用的按钮
 * @param {string} tooltipText tooltip的文案
 */

import React from 'react';
import { Button, Balloon, Badge, PopConfirm } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import { getCachedRepoValue } from 'utils/repoIdCache';
import utils from 'utils';
import track from 'utils/track';
import { navigateOpen } from 'utils/router';

const userKey = getCachedRepoValue('user');
export default class notBranchDisabledButton extends React.Component {
  state = {
    webideDotShow: false,
  };

  componentDidMount() {
    if (this.props.showDot) {
      const hasCache = utils.getCachedData(`webide-lang-${userKey}`);
      if (!hasCache) {
        // utils.setCachedData(`webide-lang-${userKey}`, '1');
        this.setState({
          webideDotShow: true,
        });
      }
    }
  }

  handleClick = (e) => {
    const { onClick } = this.props;
    this.setCache();
    onClick && onClick(e);
  };

  handleMore = () => {
    track({
      action: 'go_to_webide_help',
      page: '',
      type: '',
      control: '',
    });
    this.setCache();
    navigateOpen('https://help.aliyun.com/document_detail/382325.html');
  };

  handleKnown = () => {
    track({
      action: 'close_webide_guidance',
      page: '',
      type: '',
      control: '',
    });
    this.setCache();
  };

  setCache = () => {
    utils.setCachedData(`webide-lang-${userKey}`, '1');
    this.setState({
      webideDotShow: false,
    });
  };

  render() {
    const { revisionType } = window.FORCE.resourceSubject;
    const { tooltipText, isIcon, inMoreText, showDot, ...others } = this.props;
    const { webideDotShow } = this.state;

    let Button2;
    if (isIcon) {
      Button2 = ButtonIcon;
    } else {
      Button2 = Button;
    }

    if (revisionType !== 'branch') {
      others.onClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
      };
      const style = {
        cursor: 'not-allowed',
        color: '#fff',
        background: '#e8e8e8',
        position: 'absolute',
        left: 0,
        padding: '0 8px',
        width: '100%',
        borderRadius: '4px',
      };
      return inMoreText ? (
        <Balloon.Tooltip align="tr" trigger={<div {...others} style={style} />} text={tooltipText} />
      ) : (
        <Balloon.Tooltip align="tr" trigger={<span><Button2 disabled {...others} /></span>} text={tooltipText} />
      );
    }

    // FIXME showDot逻辑之前写死了webide按钮的，后续如需启用，需改成通用逻辑
    if (!showDot || !webideDotShow) {
      return inMoreText ? <div {...others} /> : <Button2 {...others} />;
    } else {
      const rest = {
        ...others,
        onClick: this.handleClick,
      };
      return (
        <PopConfirm
          trigger={
            <Badge style={{ marginRight: 8 }} dot={webideDotShow}>
              <Button2 {...rest} style={{ marginRight: 0 }} />
            </Badge>
          }
          triggerType="hover"
          align="bl"
          popupClassName="webide-lang-guide"
          content={
            <div className="content">
              <div className="title">WebIDE 能力增强</div>
              <ul>
                <li>· 新增 Java 语言模板开箱即用，支持一键打开 Web 版 IntelliJ IDEA </li>
                <li>· 插件及依赖无需重复安装，服务预览地址固定不变，在线开发调试更加顺畅</li>
              </ul>
              <div className="footer">
                <button className="know-more" onClick={this.handleMore}>
                  了解更多
                </button>
                <button onClick={this.handleKnown}>我知道了</button>
              </div>
            </div>
          }
          footer={null}
        />
      );
    }
  }
}
